<template>
  <div class="dashboard-container">
    <div class="hero-section">
      <div class="hero-bg-shape"></div>
      
      <div class="welcome-text">
        <h1 class="hero-title">
          {{ getWelcomeMessage() }}，{{ authStore.user?.name }}
          <el-icon class="title-smiley-icon"><Sunny /></el-icon>
        </h1>
        <p class="hero-subtitle">
          <el-icon :size="14" class="quote-icon"><Comment /></el-icon>
          “教育的本质，是一棵树摇动另一棵树，一朵云推动另一朵云，一个灵魂唤醒另一个灵魂。”
        </p>
        <div class="quick-stats">
          <div class="stat-item">
            <div class="stat-icon-wrapper" style="--icon-bg: #ffedd5; --icon-color: #f97316;">
              <el-icon><Memo /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-value">8</span>
              <span class="stat-label">待批作业</span>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-icon-wrapper" style="--icon-bg: #dbeafe; --icon-color: #3b82f6;">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-value">3</span>
              <span class="stat-label">新的提问</span>
            </div>
          </div>
          <div class="stat-item">
             <div class="stat-icon-wrapper" style="--icon-bg: #ede9fe; --icon-color: #8b5cf6;">
              <el-icon><Collection /></el-icon>
            </div>
            <div class="stat-info">
              <span class="stat-value">{{ todayClasses.length }}</span>
              <span class="stat-label">今日课程</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="weather-widget-container">
        <WeatherWidget />
      </div>
    </div>

    <el-carousel height="320px" class="feature-carousel" indicator-position="outside" arrow="always">
      <el-carousel-item v-for="item in carouselItems" :key="item.title" class="carousel-item">
        <img :src="item.bg" :alt="item.title" class="carousel-bg-image" />
        <div class="carousel-content">
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
          <el-button type="primary" round @click="handleCarouselClick(item.routeName)">立即前往</el-button>
        </div>
      </el-carousel-item>
    </el-carousel>

    <el-row :gutter="24" class="main-content-row">
      <el-col :lg="9" :md="24" class="grid-col">
        <el-card class="grid-card">
          <template #header>
            <div class="card-header">
              <el-icon><MagicStick /></el-icon>
              <span>快捷入口</span>
            </div>
          </template>
          <div class="actions-grid">
            <div class="action-item" @click="navigate('TeacherCreateExam')">
              <div class="action-icon-wrapper" style="--bg: #ecfdf5; --color: #22c55e;"><el-icon><DocumentAdd /></el-icon></div>
              <span>AI 智能组卷</span>
            </div>
            <div class="action-item" @click="navigate('TeacherAutoGrader')">
              <div class="action-icon-wrapper" style="--bg: #eff6ff; --color: #3b82f6;"><el-icon><DataLine /></el-icon></div>
              <span>AI 学情分析</span>
            </div>
            <div class="action-item" @click="goToLiveRoom('publisher')">
              <div class="action-icon-wrapper" style="--bg: #fef2f2; --color: #ef4444;"><el-icon><VideoCamera /></el-icon></div>
              <span>开启直播</span>
            </div>
            <div class="action-item" @click="goToLiveRoom('subscriber')">
              <div class="action-icon-wrapper" style="--bg: #f0fdfa; --color: #14b8a6;"><el-icon><Connection /></el-icon></div>
              <span>加入直播</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :lg="15" :md="24" class="grid-col">
        <el-card class="grid-card courses-card">
          <template #header>
            <div class="card-header">
              <el-icon><Calendar /></el-icon>
              <span>今日课程</span>
            </div>
          </template>
          <div class="course-list">
            <div v-if="todayClasses.length > 0" v-for="course in todayClasses" :key="course.name" class="course-item">
              <div class="course-icon">
                <el-icon v-if="course.name.includes('数学')"><DataBoard /></el-icon>
                <el-icon v-else><Notebook /></el-icon>
              </div>
              <div class="course-details">
                <h5 class="course-name">{{ course.name }}</h5>
                <p class="course-topic">{{ course.topic }}</p>
              </div>
              <div class="course-time-and-action">
                <span class="course-time">{{ course.time }}</span>
                <el-button class="course-button" type="primary" :icon="VideoPlay" @click="goToLiveRoom('publisher')" text bg>
                  进入教室
                </el-button>
              </div>
            </div>
            <el-empty v-else description="今日无课程安排。"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="main-content-row">
      <el-col :lg="9" :md="24" class="grid-col">
         <el-card class="grid-card">
          <template #header>
            <div class="card-header">
              <el-icon><Memo /></el-icon>
              <span>任务概览</span>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="chartOption" autoresize />
          </div>
        </el-card>
      </el-col>

      <el-col :lg="15" :md="24" class="grid-col">
        <el-card class="grid-card">
          <template #header>
            <div class="card-header">
              <el-icon><List /></el-icon>
              <span>待处理任务</span>
            </div>
          </template>
          <div class="task-list">
            <div v-if="pendingTasks.length > 0" v-for="task in pendingTasks" :key="task.id" class="task-item">
              <div class="task-icon-wrapper" :style="{ 
                '--task-bg-color': `color-mix(in srgb, ${task.color} 15%, transparent)`,
                '--task-icon-color': task.color 
              }">
                <el-icon><BellFilled /></el-icon>
              </div>
              <div class="task-details">
                <p class="task-content">{{ task.content }}</p>
                <span class="task-time">{{ task.time }}</span>
              </div>
              <el-button type="primary" :icon="ArrowRight" circle />
            </div>
            <el-empty v-else description="任务都完成了，真棒！"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../../stores/authStore';
import { useMascotStore } from '../../stores/mascotStore'; // 导入 mascotStore
import WeatherWidget from '../../components/WeatherWidget.vue';
import { 
  VideoPlay, Calendar, MagicStick, DocumentAdd, DataLine, Memo, VideoCamera,
  DataBoard, Notebook, Connection, Comment, Collection, ChatDotRound, Sunny,
  List, BellFilled, ArrowRight
} from '@element-plus/icons-vue';
import * as echarts from 'echarts/core';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useMusicStore } from '../../stores/musicStore'; // 1. 引入 music store

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

const router = useRouter();
const authStore = useAuthStore();
const mascot = useMascotStore(); // 获取 mascot store 实例
const musicStore = useMusicStore(); // 2. 获取 music store 实例
const carouselItems = ref([
    { title: 'AI 智能组卷', description: '通过人工智能，一键生成符合您教学要求的试卷。', bg: 'https://images.unsplash.com/photo-1509062522246-3755977927d7?q=80&w=3048&auto=format&fit=crop', routeName: 'TeacherCreateExam' },
    { title: 'AI 智能分析', description: '上传试卷与答题卡，深度分析学情，精准定位问题。', bg: 'https://images.unsplash.com/photo-1543286386-713bdd548da4?q=80&w=2940&auto=format&fit=crop', routeName: 'TeacherAutoGrader' },
    { title: '开启在线直播', description: '与学生进行实时互动，分享知识，解答疑惑。', bg: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=2940&auto=format&fit=crop', routeName: 'TeacherLiveRoom' },
    { title: '查看教学评价', description: '倾听学生的声音，持续改进教学质量。', bg: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2940&auto=format&fit=crop', routeName: 'TeacherEvaluation' }
]);

const todayClasses = ref([
    { name: '高等数学 (一)', time: '08:00 - 09:30', topic: '极限与连续'},
    { name: '大学英语', time: '10:00 - 11:30', topic: 'Unit 3: Culture Shock'},
]);

const pendingTasks = ref([
  { id: 1, content: '批改 三年级(2)班 的数学单元测试。', time: '2小时前', color: '#f56c6c' },
  { id: 2, content: '回复 学生张三 关于“不定积分”的提问。', time: '昨天', color: '#e6a23c' },
  { id: 3, content: '上传 《大学英语》第四单元的课件。', time: '3天前', color: '#409eff' },
]);

const chartOption = computed(() => {
  const completed = 18;
  const pending = 5;
  const total = completed + pending;
  const percentage = total > 0 ? ((completed / total) * 100) : 0;

  return {
    title: {
      text: `${percentage.toFixed(0)}%`,
      subtext: '完成率',
      left: 'center',
      top: '42%',
      textStyle: {
        fontSize: 32,
        fontWeight: 'bold',
        color: '#303133',
      },
      subtextStyle: {
        fontSize: 14,
        color: '#909399'
      },
      itemGap: 8,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'center',
      itemGap: 15,
      textStyle: {
        color: 'var(--vt-c-text-2)'
      },
      icon: 'circle',
      data: ['已批改作业', '待处理事项']
    },
    series: [{
      name: '任务详情',
      type: 'pie',
      radius: ['65%', '80%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      label: { show: false },
      labelLine: { show: false },
      data: [
        {
          value: completed,
          name: '已批改作业',
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#818cf8' },
              { offset: 1, color: '#4f46e5' }
            ])
          }
        },
        {
          value: pending,
          name: '待处理事项',
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#fcd34d' },
              { offset: 1, color: '#f59e0b' }
            ])
          }
        },
      ]
    }]
  }
});

const navigate = (routeName) => router.push({ name: routeName });
const goToLiveRoom = (role) => router.push({ name: 'TeacherLiveRoom', query: { role } });
const handleCarouselClick = (routeName) => {
    if (routeName === 'TeacherLiveRoom') {
        goToLiveRoom('publisher');
    } else {
        navigate(routeName);
    }
};

const getWelcomeMessage = () => {
  const hour = new Date().getHours();
  if (hour < 6) return "夜深了"; if (hour < 9) return "早上好"; if (hour < 12) return "上午好"; if (hour < 14) return "中午好"; if (hour < 18) return "下午好"; return "晚上好";
};

// 在组件挂载后，让诺诺显示欢迎信息
onMounted(() => {
  const welcomeMessage = `你好，${authStore.user?.name}！很高兴再次见到你。需要什么帮助吗？`;
  // 使用 setTimeout 延迟显示，给页面加载留出时间，体验更好
  setTimeout(() => {
      mascot.show(welcomeMessage, { mood: 'happy' });
  }, 500); 
  
});
</script>

<style scoped>
/* 省略所有样式，与原文件保持一致 */
.dashboard-container {
  padding: 24px;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0% { transform: translatey(0px); }
  50% { transform: translatey(-10px); }
  100% { transform: translatey(0px); }
}

/* Hero Section */
.hero-section {
  position: relative; display: flex; justify-content: space-between;
  align-items: stretch; padding: 40px; margin-bottom: 24px;
  border-radius: 24px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #a259ff 100%);
  box-shadow: 0 10px 30px -10px rgba(79, 70, 229, 0.5);
  animation: fadeInUp 0.5s ease-out; min-height: 240px;
}
.hero-bg-shape {
  position: absolute; top: -50px; right: -80px; width: 300px; height: 300px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  border-radius: 50%; filter: blur(10px); z-index: 1;
}
.welcome-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; }
.hero-title { font-size: 2.2rem; font-weight: 700; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; }
.title-smiley-icon { margin-left: 12px; font-size: 2.2rem; color: #ffc83d; }
.hero-subtitle { font-size: 1rem; opacity: 0.8; margin: 0; max-width: 450px; display: flex; align-items: flex-start; }
.quote-icon { flex-shrink: 0; margin-right: 8px; margin-top: 4px; }
.quick-stats { display: flex; gap: 20px; margin-top: auto; }
.stat-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.15); border-radius: 12px;
  backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease; cursor: pointer;
}
.stat-item:hover { background-color: rgba(255, 255, 255, 0.25); transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.stat-icon-wrapper {
  width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  background-color: var(--icon-bg); color: var(--icon-color); font-size: 22px;
}
.stat-info { display: flex; flex-direction: column; text-align: left; }
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: 0.85rem; opacity: 0.9; }

/* Weather Widget */
.weather-widget-container {
  position: relative; z-index: 2; flex-shrink: 0; width: 300px;
  display: flex; flex-direction: column;
}
.weather-widget-container :deep(.el-card) { background: transparent !important; border: none !important; box-shadow: none !important; color: #fff !important; padding: 0 !important; width: 100%; display: flex; }
.weather-widget-container :deep(.weather-content) { display: flex; flex-direction: column; text-align: right; width: 100%; }
.weather-widget-container :deep(.header) { opacity: 0.9; font-size: 0.9rem; }
.weather-widget-container :deep(.weather-body) { flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0; }
.weather-widget-container :deep(.weather-icon) { width: 120px; height: 120px; margin-right: -15px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.15)); }
.weather-widget-container :deep(.temp-info) { align-items: flex-end; }
.weather-widget-container :deep(.temperature) { font-size: 5rem; font-weight: 700; text-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.weather-widget-container :deep(.desc) { font-size: 1.2rem; font-weight: 500; background-color: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px; }
.weather-widget-container :deep(.weather-footer) { margin-top: auto; background-color: rgba(0,0,0,0.1); backdrop-filter: blur(5px); padding: 10px; border-radius: 12px; }
.weather-widget-container :deep(.footer-item) { color: rgba(255,255,255,0.9); }
.weather-widget-container :deep(.footer-item strong) { color: #fff; font-weight: 600; }

/* Carousel */
.feature-carousel { margin-bottom: 24px; animation: fadeInUp 0.6s ease-out backwards; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2); }
.carousel-item { 
  /* position: relative;  */
  height: 100%; width: 100%; color: #fff; cursor: pointer; background-color: #333; overflow: hidden; }
.carousel-bg-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.carousel-item:hover .carousel-bg-image { transform: scale(1.05); }
.carousel-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 50px 40px 30px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.carousel-content h3 { font-size: 1.8rem; font-weight: bold; margin: 0 0 8px 0; }
.carousel-content p { font-size: 1rem; margin-bottom: 20px; opacity: 0.9; max-width: 80%; }
:deep(.el-carousel__button) { background-color: var(--color-primary); width: 10px; height: 10px; border-radius: 50%; }
:deep(.el-carousel__arrow) { background-color: rgba(31, 45, 61, 0.5); color: #fff; }
:deep(.el-carousel__arrow:hover) { background-color: rgba(31, 45, 61, 0.7); }

/* Grid & Cards */
.main-content-row { animation: fadeInUp 0.7s ease-out backwards; display: flex; flex-wrap: wrap; }
.main-content-row + .main-content-row { margin-top: 24px; }
.grid-col { display: flex; flex-direction: column; }
.grid-card { height: 100%; width: 100%; display: flex; flex-direction: column; }
.grid-card :deep(.el-card__body) { flex-grow: 1; display: flex; flex-direction: column; }
.card-header { font-weight: 600; display: flex; align-items: center; font-size: 1.1rem; }
.card-header .el-icon { margin-right: 8px; color: var(--color-primary); }

/* Actions Grid */
.actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; flex-grow: 1; align-content: space-around; }
.action-item { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--vt-c-bg-mute); border: 1px solid var(--vt-c-border-color-light); border-radius: 16px; cursor: pointer; padding: 20px 10px; transition: all 0.2s ease-out; }
.action-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--color-primary); background-color: var(--vt-c-bg-soft-hover); }
.action-icon-wrapper { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background-color: var(--bg); color: var(--color); }
.action-icon-wrapper .el-icon { font-size: 26px; }
.action-item span { font-size: 1rem; font-weight: 500; color: var(--vt-c-text-1); }

/* Today's Courses Card */
.course-list { display: flex; flex-direction: column; gap: 16px; }
.course-item { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; border: 1px solid var(--vt-c-border-color-light); transition: all 0.2s ease-out; }
.course-item:hover { border-color: var(--color-primary); background-color: var(--vt-c-bg-soft-hover); transform: scale(1.02); }
.course-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff; flex-shrink: 0; }
.course-icon .el-icon { font-size: 24px; }
.course-details { flex-grow: 1; }
.course-name { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px 0; }
.course-topic { color: var(--vt-c-text-2); margin: 0; }
.course-time-and-action { text-align: right; flex-shrink: 0; }
.course-time { font-size: 0.85rem; color: var(--vt-c-text-2); display: block; margin-bottom: 8px; }

/* Chart Container */
.chart-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.chart { height: 100%; width: 100%; }

/* Task List */
.task-list { display: flex; flex-direction: column; gap: 16px; }
.task-item { display: flex; align-items: center; gap: 16px; padding: 12px; background-color: var(--vt-c-bg-mute); border-radius: 12px; border: 1px solid var(--vt-c-border-color-light); }
.task-icon-wrapper {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--task-bg-color);
  color: var(--task-icon-color);
  font-size: 20px; flex-shrink: 0;
}
.task-details { flex-grow: 1; }
.task-content { font-weight: 500; color: var(--vt-c-text-1); margin: 0 0 4px 0; }
.task-time { font-size: 0.8rem; color: var(--vt-c-text-2); }
</style>